<template>
  <div class="article-editor">
    <!-- 新增标题输入框 -->
    <el-input v-model="title" placeholder="请输入文章标题" />
    <v-md-editor 
      v-model="content" 
      height="100%" 
      :disabled-menus="[]"
      placeholder="请输入 Markdown 内容..."
      @upload-image="handleUploadImage"
    />
    <el-button type="primary" @click="submitArticle">提交文章</el-button>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { ElButton, ElInput, ElMessage } from 'element-plus';
import axios from 'axios';

// 定义 props 接收初始文章数据
const props = defineProps({
  initialTitle: {
    type: String,
    default: ''
  },
  initialContent: {
    type: String,
    default: ''
  }
});


// 文章标题
const title = ref(props.initialTitle);
// 文章内容
const content = ref(props.initialContent);

// 定义 emit
const emit = defineEmits(['submit-article']);

const handleUploadImage = async (event, insertImage, files) => {
  if (files.length === 0) {
    ElMessage.warning('未选择图片文件');
    return;
  }

  const file = files[0];
  // 检查文件类型
  const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (!validTypes.includes(file.type)) {
    ElMessage.error('仅支持 JPEG、PNG 和 GIF 格式的图片');
    return;
  }

  // 检查文件大小，这里限制为 5MB
  const maxSize = 5 * 1024 * 1024;
  if (file.size > maxSize) {
    ElMessage.error('图片大小不能超过 5MB');
    return;
  }

  try {
    const formData = new FormData();
    formData.append('image', file);

    // 替换为实际的图片上传接口
    const response = await axios.post('http://localhost:8080/zhongjianyu.cat.com/uploadImage', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });


    if (response?.data.data.url) {
      insertImage({
        url: response.data.data.url, 
        desc: file.name,
      });
      ElMessage.success('图片上传成功');
    } else {
      ElMessage.error(result.message || '图片上传失败');
    }
  } catch (error) {
    ElMessage.error('图片上传出错，请稍后重试');
    console.error('图片上传错误:', error);
  }
};

// 提交文章的方法
const submitArticle = () => {
  if (!title.value.trim()) { // 检查标题是否为空
    ElMessage.warning('文章标题不能为空，请输入标题');
    return;
  }
  console.log('提交的文章标题:', title.value);
  console.log('提交的文章内容:', content.value);
  // 通过 emit 触发事件，将标题和内容传递给父组件
  emit('submit-article', { title: title.value, content: content.value });
};
</script>

<style scoped>
.article-editor {
  display: flex;
  flex-direction: column;
}
</style>
